<template>
    <box title="设施概览">
        <div class="flex pt-[24px] pb-[24px] px-[16px]">
            <div class="numitem">
                <div class="gradient-text text-[32px] mb-[12px] leading-[32px]">{{ isNullOrEmpty( allDat.total ) }}</div>
                <div class="text-[14px] leading-[14px]">设施总数</div>
            </div>
            <div class="h-[108px] w-[1px] mx-[16px] bg-[var(--data-border-color)]"></div>
            <div style="width: calc(100% - 141px)" class="h-[108px]">
                <div class="flex">
                    <div class="text-[14px] flex-1 text-[#FFFFFF]">室内设施</div>
                    <div class="text-[14px] flex-1 text-[#FFFFFF]">即将过期</div>
                    <div class="text-[14px] flex-1 text-[#FFFFFF]">已报废</div>
                </div>
                <div class="flex pt-[10px] pb-[15px] boderboteo text-[20px] leading-[20px]">
                    <div class=" flex-1 number text-[#FFFFFF]">{{ isNullOrEmpty( allDat.inside ) }}</div>
                    <div class=" flex-1 text-[#FFFFFF]">{{ isNullOrEmpty( allDat.expire ) }}</div>
                    <div class=" flex-1 text-[#FFFFFF]">{{ isNullOrEmpty( allDat.alreadyScrap ) }}</div>
                </div>
                <div class="flex pt-[10px]">
                    <div class="text-[14px] flex-1 text-[#FFFFFF]">室外设施</div>
                    <div class="text-[14px] flex-1 text-[#FFFFFF]">已过期</div>
                    <div class="text-[14px] flex-1 text-[#FFFFFF]">即将报废</div>
                </div>
                <div class="flex pt-[10px]   text-[20px] leading-[20px]">
                    <div class=" flex-1 number text-[#FFFFFF]">{{ isNullOrEmpty( allDat.outSide ) }}</div>
                    <div class=" flex-1 text-[#FFFFFF]">{{ isNullOrEmpty( allDat.alreadyExpire ) }}</div>
                    <div class=" flex-1 text-[#FFFFFF]">{{ isNullOrEmpty( allDat.scrap ) }}</div>
                </div>
            </div>
        </div>
    </box>
</template>
<script setup lang="ts">
import { isNullOrEmpty } from '@/utils/functions'
import { screenfacilits } from '@/api/screen/largeData'
import box from '@/views/large-data-screen/component/box.vue'
const allDat= ref({
alreadyExpire: 8,
alreadyScrap: 7,
expire: 0,
inside: 2,
outSide: 7,
scrap: 1,
total: 9,
})

onMounted(()=>{
    getscreenfacilit()
})
const getscreenfacilit = async ()=>{
    screenfacilits().then(res=>{
        console.log("设备概况",res)
        allDat.value.alreadyExpire = res.result.alreadyExpire
        allDat.value.alreadyScrap = res.result.alreadyScrap
        allDat.value.expire = res.result.expire
        allDat.value.inside = res.result.inside
        allDat.value.outSide = res.result.outSide
        allDat.value.scrap = res.result.scrap
        allDat.value.total = res.result.total
    })
}
</script>
<style lang="scss" scoped>
.numitem {
    background: url("@/assets/screenimg/makerlist.png");
    width: 108px;
    height: 108px;
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.boderboteo{
    border-bottom: 1px solid var(--data-border-color)
}
</style>
